<template>
  <view class="register-page">
    <view class="zzy-top-backgroup">
      <image src="https://healthdao-oss.oss-cn-hangzhou.aliyuncs.com/wap/app_style_background.png" mode="widthFix" class="backgroud-image"></image>
    </view>
    <u-navbar title="" :autoBack="true" bgColor="transparent"> </u-navbar>
    <!-- 标题内容 -->
    <view class="blue-title">
      <image src="/static/img/logo.png" style="width: 198rpx; height: 198rpx; border-radius: 30rpx"></image>
      <view class="font35 m-t-45">欢迎来到德宥堂</view>
    </view>
    <!-- 表单内容 -->
    <view style="padding: 0 75rpx">
      <view class="input-style">
        <u--input v-model="inputParams.mobile" placeholder="请输入账号" border="none" />
      </view>

      <view class="input-style">
        <u--input v-model="inputParams.code" placeholder="验证码" :maxLength="6" border="none" />
        <u-button type="primary" shape="circle" :disabled="seconds > 0" style="width: 240rpx; height: 60rpx" @click="sendCode">{{ seconds > 0 ? seconds + 's后重新发送' : '发送验证码' }}</u-button>
      </view>

      <view class="input-style">
        <u--input v-model="inputParams.password" placeholder="输入8-16位密码包含大小写字母及数字" type="password" border="none" />
      </view>

      <view class="input-style">
        <u--input v-model="inputParams.confirmPassword" placeholder="请确认密码" type="password" border="none" />
      </view>

      <view class="input-style">
        <u--input v-model="inputParams.parentInviteCode" placeholder="邀请码（非必填）" border="none" />
      </view>

      <view class="input-style" @tap="showPicker = true">
        <view class="flex1 text-gray">当前节点：{{ inputParams.nodeText }}</view>
        <u-icon name="arrow-down"></u-icon>
      </view>

      <view class="flex-center" style="margin-bottom: 100rpx">
        <view>
          <u-checkbox-group v-model="checked" placement="column">
            <u-checkbox v-for="(item, index) in checkboxList1" :key="index" :label="item.name" :name="item.name"> </u-checkbox>
          </u-checkbox-group>
        </view>
        <view>
          <text class="text-blue" @tap="gotoXY('https://h5.dymall.pro/protocal/dyt_zcxy.html')">《用户协议》</text>
          <text class="text-blue" @tap="gotoXY('https://h5.dymall.pro/protocal/dyt_ysxy.html')">《隐私政策》</text>
        </view>
      </view>

      <u-button type="primary" text="注册" shape="circle" @click="formSubmit"></u-button>
      <!-- #ifdef WEB -->
      <u-button type="primary" plain text="下载德宥堂" shape="circle" @click="downloadAPP" class="m-t-30"></u-button>
      <!-- #endif -->

      <view style="height: 100rpx"></view>
    </view>
    <u-picker :show="showPicker" :columns="columns" keyName="title" @confirm="confirm" @close="showPicker = false" @cancel="showPicker = false" closeOnClickOverlay></u-picker>
  </view>
</template>

<script>
var app = getApp()
export default {
  data() {
    return {
      inputParams: {
        mobile: '',
        password: '',
        confirmPassword: '',
        parentInviteCode: '',
        code: '',
        node: '',
        nodeText: ''
      },
      seconds: 0,
      checked: [],
      checkboxList1: [
        {
          name: '请阅读并同意'
        }
      ],
      showPicker: false,
      columns: []
    }
  },
  onLoad(options) {
    let that = this

    if (options.scene) {
      this.inputParams.parentInviteCode = options.scene
    }

    this.getNodes()
  },
  methods: {
    // 获取节点列表
    getNodes() {
      var that = this
      app.get('ApiIndex/nodelist', {}, function (data) {
        that.columns = [data.data.list]

        that.inputParams.nodeText = data.data?.list[0]?.title
        that.inputParams.node = data.data?.list[0]?.id

        if (that.inputParams.parentInviteCode) {
          that.queryParentNode()
        }
      })
    },
    queryParentNode() {
      var that = this
      app.get('ApiIndex/pnodeid', {}, function (data) {
        if (data.data.node_id != 0) {
          that.inputParams.node = data.data.node_id
          var obj = that.columns[0].find((item, index) => {
            return item.id == data.data.node_id
          })
          console.log(obj)
          that.inputParams.nodeText = obj.title
        }
      })
    },
    sendCode() {
      var that = this
      if (that.seconds > 0) {
        app.alert('验证码等待中')
        return
      }

      if (that.inputParams.mobile == '') {
        app.alert('请输入手机号码')
        return
      }

      if (!/^1[3456789]\d{9}$/.test(that.inputParams.mobile)) {
        app.alert('手机号码有误，请重填')
        return
      }

      that.seconds = 60
      var interval1 = setInterval(function () {
        that.seconds--
        if (that.seconds == 0) {
          clearInterval(interval1)
        }
      }, 1000)
      app.post('ApiIndex/sendsms', { tel: that.inputParams.mobile }, function (data) {
        if (data.status != 1) {
          app.alert(data.msg)
        }
      })
    },
    formSubmit(e) {
      var that = this
      var { mobile, password, confirmPassword, code, node, parentInviteCode } = this.inputParams
      if (mobile == '') {
        app.alert('请输入手机号')
        return
      }
      if (password == '') {
        app.alert('请输入密码')
        return
      }
      if (password.length < 6) {
        app.alert('新密码不小于6位')
        return
      }
      if (confirmPassword == '') {
        app.alert('请再次输入新密码')
        return
      }
      if (password != confirmPassword) {
        app.alert('两次密码不一致')
        return
      }
      if (code == '') {
        app.alert('请输入短信验证码')
        return
      }
      // if (parentInviteCode == '') {
      //   app.alert('请输入邀请码')
      //   return
      // }
      if (that.checked.length == 0) {
        app.alert('请先阅读同意协议并勾选')
        return
      }
      var postdata = {
        tel: mobile,
        pwd: password,
        smscode: code,
        pid: app.globalData.pid,
        node_id: node,
        yqcode: ''
      }

      app.showLoading('提交中')
      var siteInfo = require('siteinfo.js')
      app.post('ApiIndex/regsub', postdata, function (data) {
        app.showLoading(false)
        if (data.status == 1) {
          app.success(data.msg)

          // #ifdef APP-PLUS
          app.goto('/pages/index/login')
          // #endif

          // #ifndef APP-PLUS
          let url = siteInfo.jkdUrl + 'formPages/login/downloadAPP'
          window.location.href = url
          // #endif
        } else {
          app.error(data.msg)
        }
      })
    },
    confirm(e) {
      this.inputParams.node = e.value[0].id
      this.inputParams.nodeText = e.value[0].title
      this.showPicker = false
    },
    gotoXY(url) {
      app.goto('/pages/index/webView?url=' + url)
    },
    downloadAPP() {
      var siteInfo = require('siteinfo.js')
      let url = siteInfo.jkdUrl + 'formPages/login/downloadAPP'
      /*  #ifdef WEB  */
      window.location.href = url
      /*  #endif  */

      /*  #ifndef WEB  */
      plus.runtime.openURL(url)
      /*  #endif  */
    }
  }
}
</script>

<style lang="scss" scoped>
// 导入colorUI
@import '/static/css/colorui/main.css';
@import '/static/css/colorui/icon.css';
@import '/static/css/colorui/animation.css';
.register-page {
  width: 100%;
  position: absolute;

  /* 顶部背景图 start */
  .zzy-top-backgroup {
    width: 100%;
    z-index: 0;
    position: absolute;
    top: 0;

    .backgroud-image {
      width: 100%;
    }
  }
  /* 顶部背景图 end */

  .blue-title {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    margin: 128rpx auto 86rpx;
    overflow: hidden;
  }

  .input-style {
    width: 100%;
    height: 80rpx;
    background: #f6f9fe;
    border-radius: 50rpx;
    margin-bottom: 35rpx;
    display: flex;
    align-items: center;
    padding: 0 40rpx 0;
  }
}
</style>
